<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
<script>
  let img = new Image();
  img.src = './img/1.png';
  console.log(img.src)

  let charts = echarts.init(document.getElementById('box'));

  let option = {
    backgroundColor: '#333',
    title: {
      text: "珠峰培训",
      subtext: "12年",
      left: 'center',
      top: 10,
      textStyle: {
        color: '#fff',
        fontSize: 30
      },
      subtextStyle: {
        color: 'red',
      },
      sublink: "https://baidu.com"
    },
    xAxis: {
      type: 'category',
      data: ["A", "B", "C", "D", "E", "F", "G", "H"],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        show: true,
        formatter(value, index) {
          return index + '-' + value + '%'
        }
      }
    },
    tooltip: {

    },
    series: [{
      name: "圣诞礼物数量",
      data: [51, 32, 46, 89, 57, 41, 26, 36],
      type: 'line',
      label: {
        show: true
      },
      symbol: "image://" + img.src,
      symbolSize: [30, 50],
      symbolOffset: [0, 25],
      lineStyle: {
        color: '#4bfffc'
      },
      markLine: {
        symbol: 'none',
        lineStyle: {
          color: 'red',
          type: 'dashed'
        },
        label: {
          color: 'red',
          formatter(obj) {
            console.log(obj)
            return obj.name + obj.value
          },
          distance: [-50, 0]
        },
        data: [{
            name: 'Y 轴值为 100 的水平线',
            yAxis: 80
          },
          {
            name: '平均线',
            // 支持 'average', 'min', 'max'
            type: 'average'
          },
          // [{
          //   name: "哈哈",
          //   value: 'aaa',
          //   coord: ["A", 65]
          // }, {
          //   coord: ["D", 75]
          // }]
        ]
      },
      itemStyle: {
        color({
          value
        }) {
          console.log(value)
          if (value > 40) {
            return 'red'
          } else {
            return '#4bfffc'
          }
        }
      }
    }]
  };

  charts.setOption(option);
</script>